<template>
	<view class="container">
		<u-navbar
			:title="navTitle=='add' ? '添加账号' : navTitle=='edit' ? '编辑账号' : ''" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<view class="content">
			<block v-if="!proxy.utils.isHide()">
				<u-form :model="queryParams" ref="form1" :label-style="labelStyle" label-width="200rpx">
					<u-form-item label="账号类型:" prop="type">
						<!-- 22--{{ptype ? true : false}}
						33--{{ptype}}
						44--{{typeof ptype}} -->
						<u-radio-group v-model="queryParams.type" @change="clear" :disabled="ptype ? true : false">
							<u-radio name="1">微信</u-radio>
							<u-radio name="2">支付宝</u-radio>
							<u-radio name="3">银行卡</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item :label="queryParams.type==3 ? '银行卡号:' : '账号信息'" prop="account">
						<u-input
							v-model="queryParams.account" 
							:placeholder="queryParams.type==3 ? '请输入银行卡号' : '请输入账号信息'" 
						/>
					</u-form-item>
					<u-form-item label="收款人姓名:" prop="name">
						<u-input
							v-model="queryParams.name" 
							placeholder="请输入收款人姓名" 
						/>
					</u-form-item>
					<u-form-item label="开户行:" prop="bank" v-if="queryParams.type==3">
						<u-input
							v-model="queryParams.bank" 
							placeholder="请输入开户行" 
						/>
					</u-form-item>
					<u-form-item label="联系方式:" prop="phone">
						<u-input
							v-model="queryParams.phone" 
							placeholder="请输入联系方式" 
						/>
					</u-form-item>
				</u-form>
			</block>
		</view>
		<view
			class="addBtn flex justify-center align-center"
			v-if="!proxy.utils.isHide()"
			@tap.stop="handleClick"
		>{{ navTitle=='add' ? '+添加账号' : navTitle=='edit' ? '编辑账号' : '' }}</view>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload } from "@dcloudio/uni-app"
const {proxy} = getCurrentInstance()
const labelStyle = ref({
	fontFamily: 'PingFang SC',
	fontWeight: 'bold',
	fontSize: '28rpx',
	color: '#333333',
	lineHeight: '40rpx',
})
const queryParams = ref({})
const ptype = ref('')
const navTitle = ref('')
const pid = ref('')


onLoad((option)=>{
	console.log('type', option.type)
	navTitle.value = option.title
	pid.value = option.id
	ptype.value = option.type
	queryParams.value.type = option.type
	if(navTitle.value=='edit'){
		getDetail(option.id)
	}
	console.log('option',option)
})
onUnload(()=>{
	ptype.value = ''
})
// 编辑时获取详情
function getDetail(id){
	proxy.api.withdrawalAccountDetail(id).then(res=>{
		console.log('xiangqing', res.data.data)
		let resData = res.data.data
		// 回显
		proxy.$nextTick(()=>{
			queryParams.value.type = resData.type
			queryParams.value.account = resData.account
			queryParams.value.name = resData.name
			queryParams.value.phone = resData.phone
			queryParams.value.id = resData.id
			if(resData.type==3){
				queryParams.value.bank = resData.bank
			}
		})
	})
}
function clear(){
	queryParams.value.account = ''
	queryParams.value.name = ''
	queryParams.value.bank = ''
	queryParams.value.phone = ''
}
// 添加账号
function handleClick(){
	let query = {
		...queryParams.value,
	}
	if(proxy.utils.isNullOrEmpty(queryParams.value.type)){
		proxy.tui.toast('请选择账号类型')
		return
	}else if(proxy.utils.isNullOrEmpty(queryParams.value.account)){
		proxy.tui.toast(queryParams.value.type==3 ? '请输入银行卡号': '请输入账号信息')
		return
	}else if(proxy.utils.isNullOrEmpty(queryParams.value.name)){
		proxy.tui.toast('请输入收款人姓名')
		return
	} else if(!proxy.utils.isMobile(queryParams.value.phone)){
		proxy.tui.toast('手机号格式不正确')
		return
	} else if(proxy.utils.isNullOrEmpty(queryParams.value.bank)){
		if(queryParams.value.type==3){
			proxy.tui.toast('请输入开户行')
			return
		}
	}
	// 提交
	if(navTitle.value=='edit'){
		proxy.api.editWithdrawalAccount(query).then(res=>{
			uni.$emit('add_success', 'edit')
			uni.navigateBack({
				delta: 1
			})
		})
	} else {
		proxy.api.addWithdrawalAccount(query).then(res=>{
			uni.$emit('add_success', 'add')
			uni.navigateBack({
				delta: 1
			})
		})
	}
}


</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;

		.content {
			background-color: #fff;
			padding: 0 20rpx;
		}
		.addBtn{
			width: 690rpx;
			height: 88rpx;
			background: $uni-color-primary;
			border-radius: 50rpx;
			@include str(32rpx, 500, #fff);
			margin-left: 30rpx;
			margin-top: 232rpx;
		}
	}
</style>